<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    table {
      width: 100% !important;
      border-collapse: collapse !important;
      margin: 20px 0 !important;
      font-size: 18px !important;
      text-align: left !important;
    }

    th, td {
      padding: 10px !important;
      border: 1px solid #ddd !important;
    }

    th {
      background-color: #4CAF50 !important;
      color: white !important;
      font-weight: bold !important;
    }

    /* 交替 Order ID 颜色 */
    tr:nth-child(odd) {
      background-color: #f2f2f2 !important;
    }

    tr:nth-child(even) {
      background-color: #e6f7ff !important;
    }

    /* 鼠标悬停效果 */
    tr:hover {
      background-color: #d1e0e0 !important;
      transition: background-color 0.3s ease !important;
    }
   .btn:hover {
      background-color: #005e21;
    }
  </style>

</head>

<header th:replace="common/top"></header>

<body>


<table th:each=" deliveryOrder :${deliveryOrderList}">
  <tr>
    <th>Order ID</th>
    <th>Quantity</th>
    <th>User ID</th>
    <th>Item ID</th>
  </tr>
  <tr th:each="orderDetail :${deliveryOrder.orderDetails}">
    <td th:text="${orderDetail.getOrderid()}"></td>
    <td th:text="${orderDetail.getQuantity()}"></td>
    <td th:text="${orderDetail.getUserid()}"></td>
    <td th:text="${orderDetail.getItemid()}"></td>
  </tr>
  <tr>
    <td colspan="4" style="text-align: center">
      <a class="btn" style="width: 100px; height: 30px; background-color: #4CAF50; color: white; border: none; border-radius: 5px; text-align: center; text-decoration: none; display: inline-block; margin: 10px 0; cursor: pointer;" th:href="@{/order/receive(orderid=${deliveryOrder.getOrderid()})}">确认收货</a>
    </td>

  </tr>

</table>


<!-- 包含公共底部文件 -->
<footer th:replace="common/bottom"></footer>
</body>
</html>

</body>
</html>